<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/newTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">

    <ui:define name="content">
        <p:panel header="Agenda de eventos">
            <h:form id="form" enctype="multipart/form-data" prependId="false">  
                <p:growl id="messages" showDetail="true" />  

                <p:schedule id="schedule" widgetVar="myschedule" value="#{gestorEventos.eventModel}">  
                   
                    <p:ajax event="eventSelect" listener="#{gestorEventos.onEventSelect}" update="dialog" oncomplete="PF('eventDialog').show()" />
                </p:schedule>  

                <p:dialog widgetVar="eventDialog" id="dialog" header="Detalles del Evento" showEffect="clip" hideEffect="clip">  
                    <h:panelGrid id="eventDetails" columns="2">  
                        <h:outputText value=""/>
                        <h:outputText id="nombre" value="#{gestorEventos.foro.nombre}"   style="width: 300px; font-size: 16pt; text-align: center; text-transform: uppercase;"/>
                        <h:outputText value=""/>
                        <p:graphicImage value="#{gestorEventos.foro.imagen}" alt="foto" height="200"/>
                       <h:outputText value="Desde:" style="font-size: 15pt;"/>

                        <h:outputText value="#{gestorEventos.foro.fecha}"/> 
                         <h:outputText  value="   Hasta:" style="font-size: 15pt;"/>
                        <h:outputText value="#{gestorEventos.foro.fechafin}"/> 

                              
                        <h:outputText value="Lugar" style="font-size: 15pt;"/>
                        <h:outputText value="#{gestorEventos.foro.lugar}"/>
                    </h:panelGrid>
                    <h:inputHidden id="lat" value="#{gestorEventos.foro.latitud}"/>  
                    <h:inputHidden id="lng" value="#{gestorEventos.foro.longitud}"/>
                    <br/>
                    <p:gmap id="gmap" center="#{gestorEventos.foro.latitud},#{gestorEventos.foro.longitud}" zoom="16" type="ROADMAP"   
                            style="width:500px;height:200px"  
                            model="#{gestorEventos.emptyModel}"
                            widgetVar="map">
                    </p:gmap>
                    <br/>
                    <p:panel header="Descripción del evento" style="width: 500px;">
                        <h:outputText
                        value="#{gestorEventos.foro.descripcion}" />
                    </p:panel>
                    
                </p:dialog>  
            </h:form>
        </p:panel>
    </ui:define>
</ui:composition>